<template>
  <div class="container">
    <!--  -->
      <div class="navgetion">
          <ul class="scroll-wrapper">
            <li 
              class="scroll-content" 
              v-for='(item,index) in scrollcontent'  
              :key="index" 
              :class='{ active:active===index}' 
              @click="handleClick(index)"
            >
              {{item.title}}
            </li>
          </ul>
      </div>
       
    <!--  -->
    
  
  </div>
</template>
<script>

export default {
    name: 'navmenu',
    components: {
     
   
    },
    data() {
      return {
        active:0,
        scrollcontent:[
          {
            id:0,
            title:'手机'
          },{
            id:1,
            title:'电脑'
          },{
            id:2,
            title:'背包'
          },{
            id:3,
            title:'电视机'
          },{
            id:4,
            title:'路由器'
          },{
            id:5,
            title:'数码配件'
          },{
            id:6,
            title:'日用百货'
          },{
            id:7,
            title:'服务'
          },{
            id:8,
            title:'零售店'
          }
        ],
        
      } 
    },
    mounted() {
      this.getProductList()
    },
    methods: {
      handleClick(index){
        this.active = index;
        // console.log(index)
        this.$emit('propsindex',this.active)
      },
      
      getProductList() {
        this.axios.get("/products", {
          params: {
            categoryId: "100012",
            pageSize: 6
          }
        }).then(res => {
          // this.activeMenu = res.data.id
          this.productitem = res.data.list;
          console.log(res);
        });
      }

    }
}
</script>

<style lang="scss" scoped>
.container{
  // width:100vw;
  // height:100vh;
  .navgetion{
	display:block;
	bottom:2vh solid #fff;
	z-index:999;
	overflow:hidden;
	height:6vh;
	box-shadow:0px 0px 150px 10px rgba(0, 0, 0, 0.3);
	padding:0 1vw 0 1vw;
	box-sizing:border-box;
	
    .scroll-wrapper{
      display:flex;
      justify-content:space-between;
      overflow:hidden;
      width: 98vw;
      height: 7.5vh; 
      overflow-x:auto;
      white-space:nowrap;
      .scroll-content{
        display:inline-block;
        line-height:6vh;
        font-size:0.8rem;
        padding:0 4vw;
      }
      .active{
         color:#f20; 
         font-weight:900;
      }
    }
  }
  .children{
    //Swiper
    .my-swipe .van-swipe-item {
      img{
          width:100vw;
      }
    }
    
    //productlist
    .container-productlist {
      padding: 0 2vw 2vh 2vw;
      box-sizing: border-box;
      background: #eee;
      font-size: 0.7rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .proguct-list {
        width: 46vw;
        background-color: #fff;
        border-radius: 0.8rem;
        margin-top: 1vh;
        .proguct-img {
          img {
            width: 46vw;
            border-radius: 0.8rem 0.8rem 0 0;
          }
        }
        .proguct-name {
          width: 44vw;
          text-align: center;
          padding: 0 1vw;
          box-sizing: border-box;
          line-height: 4vh;
          white-space: nowrap;
          overflow: hidden;
          margin: 0 1vw;
          color: #666;
        }
        .proguct-price {
          width: 46vw;
          text-align: center;
          line-height: 4vh;
          color: #666;

          span {
            display: inline-block;
            width: 22vw;
          }
          .price {
            color: #f20;
          }
        }
      }
    }
    
    //product-list-row
    .product-list-row{
      height:20vh;
      display:flex;
      position: relative;
      padding: .25rem .5rem;
      box-sizing:border-box;
      background: #fff;
      overflow: hidden;
      .product-list-row-img{
        flex:1;
          img{
            width:100%;
            border-radius:8%;
          }
      }
      .product-list-row-info{
        padding:0 0 0 0.8em;
        box-sizing:border-box;
        flex:1.8;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        font-size:0.7rem;
        .info-name{
          height:2rem;
          line-height:1rem;
          overflow:hidden;
          color: #999;
        }
        .info-icons{
          height:1rem;
          line-height:1rem;
        }
        .info-p{
          height:1rem;
          line-height:1rem;
        }
        .info-bottom{
          height:2rem;
          line-height:1rem;

          .price{
            color:#f40;
            line-height:1rem;
          }
        }
      }
    }
  
  }
}
</style>
